<template>
  <div class="step-one">
    <h3 class="pad-t-16 pad-b-15" v-if="!storeApply">是否有门店</h3>
    <div class="flex flex-between store-radio-group" v-if="!storeApply">
      <div class="store-radio" :class="{'store-checked': isHasStore===1}" @click="chooseStore(1)">
        <div class="font-16 line-h-20">有门店</div>
        <div class="font-12 selete-tip">如菜鸟驿站、便利店等</div>
        <div class="success"><van-icon name="success" /></div>
      </div>
      <div class="store-radio mar-l-13" :class="{'store-checked': isHasStore===0}" @click="chooseStore(0)">
        <div class="font-16 line-h-20">无门店</div>
        <div class="font-12 selete-tip">没有对外开放的门店</div>
        <div class="success"><van-icon name="success" /></div>
      </div>
    </div>
    <h3 style="padding: 38px 0 40px;">提货点位置</h3>
    <div>
      <van-field :value="takeName" label="提货点名称" placeholder="请描述提货点特征以便顾客找到" :error-message="takeName ? ' ' : nameTip" @input="nameInput"/>
      <van-field class="button-field" 
        :class="{'has-address': address.address}"
        :value="address.name"
        label="提货点地址"
        placeholder="点击选择地址"
        use-button-slot
        readonly
        :error-message="address.address ? address.address : addressTip"
        @click="chooseAddress"
      >
        <div slot="button" class="choose-address">
          <van-icon name="location" />
          <span class="mar-l-7">选择地址</span>
        </div>
      </van-field>
    </div>
    <div class="font-color-9 mar-t-25 write-rule">
      <div class="font-12">地址填写规则</div>
      <p>1. 您的提货点位置信息将由提货点地址加上门牌号码组成，请认真详细填写，否则影响您的入驻。</p>
      <p>2. 城市门店的提货点位置信息格式: x市xxx区xo路xox小区xx号楼xx单元xx号，示例:成都市武候区一环南路明珠小区2号楼3单元202。</p>
      <p>3. 乡镇门店的提货点位置信息格式:xx市xoxe县x乡镇x村xxxc组示例:武汉市黄石县河口镇荧山村大元组;</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    activeIndex: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      isHasStore: 0, // 是否有无门店：0-否，1-有
      takeName: '', // 提货点名称
      address: {
        name: '',
        address: '',
        latitude: '',
        longitude: ''
      },
      nameTip: ' ',
      addressTip: ' ',
      houseNumTip: ' ',
      storeApply: false // 是否是申请
    }
  },
  mounted() {
    let stepOne = this.$pt.getStorageSync('applyStore') // 获取各个步骤缓存的申请的内容
    this.storeApply = this.$pt.getStorageSync('store-apply') // 获取门店申请缓存，判断是申请门店还是申请团长
    let address = {
      name: '',
      address: '',
      latitude: '',
      longitude: ''
    }
    this.isHasStore = stepOne.isHasStore === 1 ? 1 : 0
    this.takeName = stepOne.takeName || ''
    this.address = stepOne.address || address
  },
  methods: {
    chooseStore(e) {
      this.isHasStore = e
      this.changeValue()
    },
    nameInput(e) {
      // 提货点名称输入框input事件
      this.takeName = e.mp.detail
      this.changeValue()
    },
    chooseAddress() {
      // 选择地址
      this.$pt.chooseLocation({
        success: res => {
          console.log(res)
          this.address.name = res.name
          this.address.address = res.address
          this.address.latitude = res.latitude
          this.address.longitude = res.longitude
          this.changeValue()
        },
        fail: err => {
          let that = this
          that.$pt.showModal({
            content: '需要访问你的位置信息',
            success(res) {
              if (res.confirm) {
                that.$pt.openSetting()
              } else if (res.cancel) {
                console.log(err)
              }
            }
          })
        }
      })
    },
    changeValue() {
      let params = {
        isHasStore: this.isHasStore,
        takeName: this.takeName,
        address: this.address
      }
      console.log(this.takeName)
      this.$emit('change', params)
    },
    checkData() {
      // 数据检查
      if (!this.takeName) {
        this.nameTip = '请填写正确的提货点名称'
        return false
      } else if (!this.address.name || !this.address.address || !this.address.latitude || !this.address.longitude) {
        this.addressTip = '请设置修改地址'
        return false
      }
      return true
    }
  }
}
</script>
<style lang="less" scoped>
@selectColor: #FF1717;
.step-one{
  padding: 0 16px;
  background-color: #fff;
  h3{
    font-weight: bold;
    font-size: 20px;
  }
  .store-radio-group{
    .store-radio{
      width: 165px;
      height: 60px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      border: 1px solid #EEEEEE;
      border-radius: 8px;
      padding-left: 12px;
      .line-h-20{
        line-height: 20px;
      }
      .success{
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 18px;
        background-color: #EEEEEE;
        border-radius: 0 8px 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .selete-tip{
        color: #999999;
      }
      /deep/.van-icon-success{
        color: #B5B5B5;
      }
    }
    .store-checked{
      border-color: @selectColor;
      color: @selectColor;
      .success{
        background-color: @selectColor;
      }
      .selete-tip{
        color: @selectColor;
      }
      /deep/.van-icon-success{
        color: #FFF;
      }
    }
  }
  .choose-address{
    width: 84px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid @selectColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: @selectColor;
  }
  .write-rule{
    line-height: 21px;
    font-size: 12px;
  }
  /deep/.van-cell{
    padding: 16px 0 5px;
    &::after{
      left: 0;
    }
    .van-cell__title{
      font-size: 16px;
      color: #666;
      font-weight: bold;
      max-width: 102px!important;
      min-width: 102px!important;
    }
    .van-field__error-message{
      height: 13px;
      line-height: 13px;
      width: 155px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .van-field__input{
      font-size: 16px;
    }
  }
  .button-field{
    /deep/.van-cell{
      padding: 11px 0 5px;
      .van-cell__title{
        margin-top: 5px;
      }
      .van-field__error-message{
        margin-top: -5px;
      }
    }
  }
  .has-address{
    /deep/.van-cell{
      .van-field__error-message{
        color: #666;
      }
    }
  }
}
</style>
